<template>
  <div class="main">
    <header>
      <div class="icon">
        <van-icon name="arrow-left" @click="$router.back()" />
      </div>
      <div class="title">{{ houseInfo.community }}</div>
      <div class="right"></div>
    </header>
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="(item, index) in houseInfo.houseImg"
          :key="index"
          @click="getImgShow(index)"
        >
          <van-image class="image-swipe" :src="toUrl + item" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="house-Info">
      <div class="house-name">{{ houseInfo.title }}</div>
      <div class="tags" v-if="!!houseInfo.tags">
        <div class="ta" v-for="(tag, i) in houseInfo.tags.slice(0, 4)" :key="i">
          <van-tag
            type="primary"
            class="tag"
            :class="{
              HouseItem1: i === 0,
              HouseItem2: i === 1,
              HouseItem3: i === 2
            }"
            >{{ tag }}
          </van-tag>
        </div>
      </div>
      <div class="tags" v-else></div>
      <div class="house-specific">
        <div class="price al">
          <span class="ss gg">{{ houseInfo.price }}<span>/月</span></span>
          <p class="ss">租金</p>
        </div>
        <div class="type al">
          <span class="ss gg">{{ houseInfo.roomType }} </span>
          <p class="ss">房型</p>
        </div>
        <div class="size al">
          <span class="ss gg">{{ houseInfo.size }} 平米</span>
          <p class="ss">面积</p>
        </div>
      </div>
      <van-grid
        :border="false"
        :center="false"
        direction="horizontal"
        :column-num="2"
      >
        <van-grid-item>
          <template #text>
            <span>装修：<span class="type">精装</span></span>
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #text>
            <span
              >朝向： <span class="type">{{ orientation }}</span></span
            >
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #text>
            <span>
              楼层：
              <span class="type"> {{ houseInfo.floor }}</span></span
            >
          </template>
        </van-grid-item>
        <van-grid-item>
          <template #text>
            <span>类型：<span class="type">普通住宅</span></span>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 小区地图 -->
    <div class="plot">
      <div class="plot-title">小区：{{ community }}</div>
      <baidu-map
        scroll-wheel-zoom
        class="baidu-map"
        :dragging="false"
        :zoom="18"
        :center="coord"
      >
        <bm-overlay pane="labelPane" class="sample" @draw="draw">
          <div class="rect-content">
            <span class="rect">{{ community }}</span>
          </div>
        </bm-overlay>
      </baidu-map>
    </div>

    <!-- 房源概述 -->
    <div class="SummaryHousing">
      <div class="Summary-title">房源概述</div>
      <div class="cont">
        <div class="user">
          <div class="use__r">
            <div class="user-photo">
              <img src="@/assets/imgs/avatar.png" alt="" />
            </div>
            <div class="user-info">
              <p>王女士</p>
              <p class="info">
                <span class="iconfont icon-auth"></span>
                <span>已认证房主</span>
              </p>
            </div>
          </div>
          <div class="btn">
            <van-button size="small" plain type="primary">发消息</van-button>
          </div>
        </div>
        <div class="content">
          {{ houseInfo.description }}
        </div>
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="SummaryHousing lick">
      <div class="Summary-title">猜你喜欢</div>
      <houseList></houseList>
    </div>
    <!-- footer -->
    <footer>
      <div @click="addCollect" class="shoucang a">
        <img v-if="!isCollect" src="@/assets/imgs/unstar.png" alt="" />
        <img v-else src="@/assets/imgs/star.png" alt="" /> 收藏
      </div>
      <div class="zaixian a">在线咨询</div>
      <div class="yuyue a">电话预约</div>
    </footer>

    <!-- 图片预览 -->
    <van-image-preview
      showIndex
      :startPosition="imgIndex"
      v-model="show"
      :images="imgList"
      @change="onChange"
      closeable
    >
    </van-image-preview>
  </div>
</template>

<script>
import { getHouseInfo, getHouse, addCollect, removeCollect } from '@/api'
import { TotalUrl } from '@/utils/TotalUrl.js'
import { mapMutations } from 'vuex'
import houseList from '@/views/seekHouse/commponents/houseList.vue'
export default {
  name: '',
  components: {
    houseList
  },
  props: {},
  data() {
    return {
      id: this.$store.state.houseId || this.$route.query.id,
      // 房屋详细信息
      houseInfo: {},
      // 拼接img
      toUrl: TotalUrl,
      // 方位
      orientation: null,
      // 判断是否收藏
      isCollect: false,
      // show图片预览
      show: false,
      // 图片索引
      imgIndex: 0,
      // 图片数组
      imgList: [],
      //  地图位置
      coord: null,
      community: null
    }
  },
  computed: {},
  watch: {},
  created() {
    // 调用猜你喜欢获取房屋
    this.GuessLike()
    this.getHouseInfo()
  },
  methods: {
    ...mapMutations(['SET_HOUSELIST']),
    async getHouseInfo() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      try {
        const { data: res } = await getHouseInfo(this.id)
        this.houseInfo = res.body
        this.orientation = res.body.oriented[0]
        res.body.houseImg.forEach((item) => {
          this.imgList.push(this.toUrl + item)
        })
        this.coord = {
          lat: res.body.coord.latitude,
          lng: res.body.coord.longitude
        }
        this.community = res.body.community
      } catch (err) {
        this.$toast.fail('获取房屋详细信息失败！')
      }
    },
    // 添加房屋收藏
    async addCollect() {
      if (this.$store.state.user) {
        if (!this.isCollect) {
          try {
            const { data: res } = await addCollect(this.id)
            if (res.status === 400) {
              return this.$toast.fail(res.description)
            }
            this.isCollect = true
            this.$toast.success('收藏成功！')
          } catch (err) {
            this.$toast.fail('收藏失败！')
          }
        } else {
          try {
            const { data: res } = await removeCollect(this.id)
            if (res.status === 400) {
              return this.$toast.fail(res.description)
            }
            this.isCollect = false
            this.$toast.success('已取消收藏！')
          } catch (err) {
            this.$toast.fail('取消收藏失败！')
          }
        }
      } else {
        try {
          await this.$dialog.confirm({
            title: '好客租房',
            message: '您还未登录，是否跳转登录页面?'
          })
          this.$router.push('/login')
        } catch {}
      }
    },
    // 预览图片
    getImgShow(i) {
      this.show = true
      this.imgIndex = i
    },
    onChange(index) {
      this.imgIndex = index
    },
    // 发起猜你喜欢的请求
    async GuessLike() {
      try {
        const { data: res } = await getHouse({
          end: 3
        })
        this.SET_HOUSELIST(res.body.list)
      } catch (err) {
        throw err
      }
    },
    draw({ el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(new BMap.Point(this.coord))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
}
</script>

<style scoped lang="less">
.main {
  background-color: #f6f5f6 !important;
}
header {
  display: flex;
  align-items: center;
  height: 90px;
  color: #fff;
  background-color: #21b97a;
  .icon {
    flex: 1;
    .van-icon {
      margin-left: 30px;
    }
  }
  .title {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
  }
  .right {
    flex: 1;
  }
}
.van-swipe-item {
  display: inline-block;
  width: 100%;
  height: 504px;
  background: #f6f5f6;
  text-decoration: none;
}
.image-swipe {
  width: 100%;
  vertical-align: top;
}
:deep(.my-swipe) {
  position: relative;
  .van-swipe__indicators {
    position: absolute;
    bottom: 8px;
    .van-swipe__indicator {
      width: 16px;
      height: 16px;
      margin: 0 6px;
      background: #cccccc;
    }
    .van-swipe__indicator--active {
      background-color: #888 !important;
    }
  }
}
.house-Info {
  width: 100%;
  background-color: #fff;
  padding: 30px;
  .house-name {
    font-weight: 400;
    font-size: 32px;
    color: #333;
    margin: 32px 0;
  }
  .tags {
    height: 40px;
    display: flex;
    align-items: center;
    .ta {
      flex: 1;
      .tag {
        display: inline-block;
        font-size: 24px;
        border-radius: 6px;
        padding: 8px 10px;
        margin-right: 10px;
        line-height: 24px;
        color: #333333;
        background: #fff;
      }
    }
    .HouseItem1 {
      color: #39becd !important;
      background: #e1f5f8 !important;
    }
    .HouseItem2 {
      color: #3fc28c !important;
      background: #e1f5ed !important;
    }
    .HouseItem3 {
      color: #5aabfd !important;
      background: #e6f2ff !important;
    }
  }
  .house-specific {
    border-top: 2px solid #cecece;
    border-bottom: 2px solid #cecece;
    margin: 30px 0;
    padding: 30px 0;
    height: 168px;
    display: flex;
    justify-content: center;
    align-items: center;
    .al {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .ss {
        width: 220px;
        height: 52px;
        color: #999;
        text-align: center;
        height: 52px;
        line-height: 52px;
      }
      .gg {
        color: #fa5741;
        font-size: 36px;
        font-weight: bolder;
        span {
          font-size: 24px;
          font-weight: 400;
        }
      }
    }
  }
  :deep(.van-grid-item) {
    .van-grid-item__content {
      padding: 0 !important;
      height: 52px !important;
      span {
        display: inline-block;
        color: #999;
        padding-right: 10px;
        line-height: 52px;
        font-size: 26px;
        .type {
          color: #333;
        }
      }
    }
  }
}
.plot {
  width: 100%;
  height: 378px;
  margin: 20px 0;
  background-color: #fff;
  padding: 30px 0;
  .plot-title {
    height: 88px;
  }
}
.SummaryHousing {
  background-color: #fff;
  .Summary-title {
    font-weight: 600;
    font-size: 30px;
    margin-bottom: 20px;
    padding: 30px;
    border-bottom: 2px solid #cecece;
  }
  .cont {
    padding: 0 20px;
    .user {
      height: 124px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .use__r {
        display: flex;
        align-items: center;
        .user-photo {
          width: 104px;
          height: 104px;
          margin: 20px 20px 0 0;
          img {
            width: 104px;
            height: 104px;
          }
        }
        .user-info {
          height: 124px;
          padding: 30px 0 0 10px;
          font-size: 28px;
          color: #333;
          .info {
            color: #fa5741;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .iconfont {
              margin-right: 4px;
            }
          }
        }
      }
      .btn {
        position: relative;
        left: -30px;
        :deep(.van-button--primary) {
          width: 148px;
          height: 58px;
          border-radius: 4px;
        }
      }
    }
    .content {
      padding: 20px 0;
    }
  }
}
.lick {
  margin-top: 20px;
}
footer {
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100%;
  height: 100px;
  background-color: #fff;
  .a {
    background-color: #fff;
    flex: 1;
    border-left: 2px solid #e8e8e9;
    border-top: 2px solid #e8e8e9;
    font-size: 34px;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      position: relative;
      left: -6px;
      width: 32px;
      height: 32px;
    }
  }
  .zaixian {
    margin-left: 16px;
  }
  .yuyue {
    color: #fff;
    margin-left: 16px;
    background-color: #21b97a;
  }
}
:deep(.van-image-preview__index) {
  top: 95%;
  left: 90%;
}
.baidu-map {
  height: 290px;
  width: 100%;
}
.rect-content {
  width: 132px;
  height: 40px;
  background: red;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  span {
    width: 132px;
    height: 40px;
  }
}
</style>
